<template>
  <div class="tabs">
    <el-button size="mini" @click="$router.push('/dashBoard')" :class="{active: $route.path==='/dashBoard'}">首页</el-button>
    <el-button
      v-for="(tab, index) in $store.state.nav.tabs"
      :key="tab.path"
      @click="$router.push(tab.path)"
      size="mini"
      :class="{
        active: tab.path === $route.path
      }">
      <span>{{tab.label}}</span>
      <i @click.stop="closeTab(index)" style="margin-left:5px;font-size: 14px" class="el-icon-close"></i>
    </el-button>
  </div>
</template>

<script>
export default {
  methods: {
    closeTab (index) {
      this.$store.commit('nav/closeTab', index)
      // 到跳转到当前剩余 tab的最后一个
      const tabs = this.$store.state.nav.tabs
      // 判断当前删除的是否是最后一个
      if (tabs.length === 0) {
        // 跳转到 dashBoard
        this.$router.push('/dashBoard')
      } else {
        this.$router.push(tabs[tabs.length - 1].path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs{
  height: 32px;
  background-color: #fff;
  border-top: 2px solid #f1f1f1;
  border-bottom: 2px solid #f1f1f1;
  padding:0 10px;
  display: flex;
  align-items: center;
  button.active{
    background-color: #42b983;
    color: #fff;
  }
}
</style>
